
<template>
  <div :style="{ '--theme': $store.getters.themeColor }" :class="['show-imgs-container',videos.length == 1?'no-trigger':''] " id="full-carousel" style="aspect-ratio:16/9" @mouseover="isIn = true" @mouseout="isIn = false" >
    <el-carousel ref="carousel" :interval="cutTime" arrow="always" :autoplay="autoplay" trigger="click" mute="true" show-mute-btn
      :indicator-position="autoplay ? 'none' : 'none'" class="changeImg" @change="getIndex">

      <el-carousel-item v-for="(item, index) in videos" :key="`${item.src}${index}`">
         <EasyPlayer :ref="'videoPlayer'+ index" :videoUrl="item.src" :easyStretch="false" class="vjs-custom-skin" @timeupdate="timeupdate"
                    :has-audio="$store.getters.flvHasAudio || !item.src.includes('.flv')">
        </EasyPlayer>
        <!-- <i v-show="!isPlay" class="play-btn el-icon-video-play" @click="playVideo"></i>
        <i v-show="isPlay && isIn" class="play-btn el-icon-video-pause" @click="pauseVideo"></i> -->
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
  name: "videoRepet",
  props: {
    title: {
      //模块标题
      type: String,
      default: "",
    },
    videos: {
      //视频数组
      type: Array,
      default: [],
    },
    videoHeight: {
      //视频数组
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      videoPlay: false,
      autoplay: true, //是否自动切换
      isPlay: false, //播放状态
      isIn: false, //鼠标是否位于播放器内
      cutTime: 5000, //轮播时间，单位毫秒
      nowIndex: 0,
    };
  },
  mounted() {
    // this.videos.map(item =>{
    //     item.playerOptions ={
    //         playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
    //         autoplay: true, //如果true,浏览器准备好时开始回放。
    //         loop: false, // 导致视频一结束就重新开始。
    //         muted: true, // 默认情况下将会消除任何音频。
    //         preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
    //         language: 'zh-CN',
    //         fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    //         hls: true,
    //         html5: {
    //             hls: {
    //             withCredentials: false
    //             }
    //         },
    //         sources: [{
    //             type: 'application/x-mpegURL',
    //             src: '',
    //         }],
    //         aspectRatio: '16:9',
    //         poster: '', // 封面地址
    //         choosed: false, //被选中的
    //         notSupportedMessage: '无上传视频！', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
    //         controlBar: {
    //             timeDivider: false,
    //             durationDisplay: false,
    //             remainingTimeDisplay: false,
    //             fullscreenToggle: true  //全屏按钮
    //         },
    //         };
    //         item.playerOptions.sources[0].type = 'video/mp4';
    //         item.playerOptions.sources[0].src = item.src;
    // })
    //初始监听第一个视频
    // this.listenVideo();
  },
  methods: {
    timeupdate(e) {
      this.autoplay = false;
    },
    /**
     * 视频播放失败重新加载
     */
    playStatechanged(event, data) {
      if (event.playing === true) {
        data.playerOptions.sources[0].playing = true;
      }

      if (event.error === true && data.playerOptions.sources) {
        const sources = JSON.parse(JSON.stringify(data.playerOptions.sources));
        data.playerOptions.sources[0].src = "";
        let t = 2000;
        if (!data.playerOptions.sources[0].reload) {
          data.playerOptions.sources[0].reload = 1;

          t = 4000;
        }
        setTimeout(() => {
          if (
            data.playerOptions.sources &&
            !data.playerOptions.sources[0].src
          ) {
            data.playerOptions.sources[0].src = sources[0].src;
            data.playerOptions.sources[0].reload++;
          }
        }, t);
      }
    },
    //走马灯索引切换事件
    getIndex(nowIndex, oldIndex) {
      //用户可能在上个视频未播放完毕就切换
      //此时需要暂停上个视频并把时间归零，否则影响对当前视频的监听逻辑
      // var player = document.querySelector('#player video')
      // player.addEventListener('play', (e) => {
      //   console.log('播放事件回调：', 'play');
      // })
      // player.addEventListener('pause', (e) => {
      //   console.log('暂停事件回调：', 'pause');
      // })
      let myVideo = this.$refs["videoPlayer" + oldIndex];
      console.log(myVideo[0])
      this.$emit('change', nowIndex);
      // myVideo[0] && myVideo[0].pause();
      // myVideo[0] && (myVideo[0].currentTime = 0);
      // this.nowIndex = nowIndex;
      // this.listenVideo();
      // this.onPlayerPause();
    },
    // 暴露给外部调用的方法，设置当前选中的索引
    setActiveItem(newIndex) {
      this.$refs.carousel.setActiveItem(newIndex);
    },
    next() {
      this.$refs.carousel.next();
    },
    prev(newIndex) {
      this.$refs.carousel.prev();
    },
    //监听暂停事件
    onPlayerPause() { },
    //监听视频的播放、暂停、播放完毕等事件
    listenVideo() {
      //注意：这样获取的dom是一个数组，必须加上[0]索引才能正确的添加事件
      let myVideo = this.$refs["videoPlayer" + this.nowIndex];
      //监听播放
      myVideo[0].addEventListener("play", () => {
        this.autoplay = false;
        this.isPlay = true;
      });
      //监听暂停
      myVideo[0].addEventListener("pause", () => {
        this.autoplay = true;
        this.isPlay = false;
      });
      //监听播放完毕
      myVideo[0].addEventListener("ended", () => {
        //时间归零
        myVideo[0].currentTime = 0;
        this.autoplay = true;
        this.isPlay = false;
      });
    },
    // 播放视频
    playVideo() {
      //注意：这样获取的dom是一个数组，必须加上[0]索引才能正确的添加事件
      let myVideo = this.$refs["videoPlayer" + this.nowIndex];
      myVideo[0].play();
    },
    //暂停视频
    pauseVideo() {
      //注意：这样获取的dom是一个数组，必须加上[0]索引才能正确的添加事件
      let myVideo = this.$refs["videoPlayer" + this.nowIndex];
      myVideo[0].pause();
    },
    /*
    * 全屏
    * */
    fullScreen(){
      if(!this.checkFullScreen()) {
        let el = document.getElementById('full-carousel') || document.documentElement;
        const rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
        if (typeof rfs !== 'undefined' && rfs) {
          rfs.call(el);
        }
      }else {
        this.outFullScreen();
      }
    },
    /*
    * 判断是否处于全屏状态
    * */
    checkFullScreen(){
      let isFull = document.mozFullScreen ||
        document.fullScreen ||
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false
      }
      return isFull;
    },
    /**
     * 退出全屏
     */
    outFullScreen() {
      let fullscreenEnabled = document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled;
      if (!fullscreenEnabled) {
        return false;
      }
      let fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
      if(fullscreenElement !== undefined) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    },

  },
};
</script>
<style lang="scss" scoped >
$theme: var(--theme);
.show-imgs-container {
  width: 100%;

  .el-carousel {
    width: 100%;
    height: 100%;
  }

  .el-carousel__container {
    width: 100%;
    height: 100%;
  }

  .el-carousel__item {
    width: 100%;
    height: 100%;
    border-radius: 10px;

    video {
      width: 100%;
      height: 100%;
      position: fixed;
      display: inline-block;
      vertical-align: baseline;
      object-fit: fill; //消除留白
    }

    .play-btn {
      font-size: 60px;
      color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      &:hover {
        cursor: pointer;
      }
    }
  }
}
::v-deep .easy-player {
  //.easy-player-loading {
  //  width: 30%;
  //  height: auto;
  //  display: table;
  //  top: 20%;
  //  left: 35%;
  //  margin-top: 0px;
  //  margin-left: 0px;
  //}
  .easy-player-loading img {
    content: url("~@/assets/image/logo-gif.gif") !important;
    width: 100% !important;
    height: auto !important;
  }
  /** 屏蔽easyplayerlogo **/
  .easy-player-loading .loading-text {
    display: none !important;
  }
}
.no-trigger /deep/.el-carousel__arrow{
  display: none;
}
/deep/.el-carousel__container {
  height: 100%;
  width: 100%;
}
.full-screen {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 25px;
  width: 40px;
  cursor: pointer;
  line-height: 30px;
  color: #fff;
  text-align: center;
  transition: all .3s;
  transition-delay: 2.3s;
  opacity: 0;
}
#full-carousel:hover .full-screen {
  transition-delay: 0s;
  opacity: 1;
}
/deep/.el-carousel__arrow {
  background: #fff;
  opacity: 0.3;
  color: #000;
}
/deep/.el-carousel__arrow:hover {
  background: #fff;
  opacity: 0.8;
}
/deep/.easy-big-play-button {
  opacity: 0;
}
</style>
